<template>
  <div class="emit">
    <van-nav-bar title="系统设置" left-text="" left-arrow @click-left="onClickLeft" />
    <div v-if="token = 200">
      <!-- 头像 -->
      <van-cell is-link title="头像" class="tou" @click="tou">
        <img src="../../img/user.jpg" alt="" class="img">
      </van-cell>
      <!-- 头像弹框 -->
      <van-popup v-model:show="showT" class="popup-tou">
        <p>拍照</p>
        <p>选取本地图片</p>
      </van-popup>
      <!-- <van-popup v-model:show="showT" class="popup-tou2">
        <p>取消</p>
      </van-popup> -->
      <!-- 昵称 -->
      <van-cell is-link title="昵称" class="new" @click="toemitname">
        <span class="name" style="margin-right: 10px;">msYJPeAQOb</span>
      </van-cell>
      <!-- 账号设置 -->
      <van-cell is-link title="账号设置" class="new"></van-cell>
      <!-- 新消息通知 -->
      <van-cell is-link title="新消息通知" class="new">
        <span class="yi" style="margin-right: 10px;">已开启</span>
      </van-cell>
      <!-- 隐私 -->
      <van-cell is-link title="隐私" class="new"></van-cell>
      <!-- 个人信息收集清单 -->
      <van-cell is-link title="个人信息收集清单" class="new"></van-cell>
      <!-- 第三方信息共享清单 -->
      <van-cell is-link title="第三方信息共享清单" class="new"></van-cell>
      <!-- 当前版本 -->
      <van-cell title="当前版本" class="new">
        <span class="name" style="margin-right: 10px;">V6.4.34</span>
      </van-cell>
      <button @click="tologin" class="tologin">退出登录</button>
      <van-popup v-model:show="show" class="popup">
        <p>是否退出登录？</p>
        <span>
          <button class="qu" @click="qu">取消</button>
          <button class="que" @click="que">确定</button>
        </span>
      </van-popup>
    </div>
    <div v-else>
      <div>
        <!-- 新消息通知 -->
        <van-cell is-link title="新消息通知" class="new"><span>已开启</span></van-cell>
        <!-- 隐私 -->
        <van-cell is-link title="隐私" class="new"></van-cell>
        <!-- 个人信息收集清单 -->
        <van-cell is-link title="个人信息收集清单" class="new"></van-cell>
        <!-- 第三方信息共享清单 -->
        <van-cell is-link title="第三方信息共享清单" class="new"></van-cell>
        <!-- 当前版本 -->
        <van-cell title="当前版本" class="new"><span class="v">V6.4.34</span></van-cell>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 确认框
const show = ref(false);
// 头像框
const showT = ref(false)
// 点击头像显示头像弹框
const tou =()=>{
  showT.value = true
}
// 点击去修改昵称
const toemitname =()=>{
  window.location.href = '/emit-emit'
}
// 获取token
localStorage.getItem('token')
const onClickLeft = () => history.back();
// 点击退出登录显示弹框
const tologin = () => {
  show.value = true;
}
// 点击取消关闭弹框
const qu =()=>{
  show.value = false
}
// 点击确定退出登录
const que=()=>{
  console.log('退出登录')
  // this.$router.push('/login')
  localStorage.removeItem('token')
  window.location.href = '/login'
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tou {
  width: 94%;
  height: 50px;
  margin-top: 10px;
  margin-left: 3%;
  align-items: center;
  border-radius: 5px;
}

.img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  margin-top: 6px;
}

.name {
  color: rgba(0, 0, 0, 0.634);
  font-weight: 550;
}

.emit {
  width: 100%;
  height: 670px;
  background-color: #f1efef;
}

.new {
  width: 94%;
  height: 35px;
  align-items: center;
  margin-left: 3%;
  margin-top: 10px;
  border-radius: 8px;
  /* position: relative;
  cursor: help; */
}
span {
  color: rgba(0, 94, 255, 0.6);
  font-weight: 800;
}

.tologin {
  width: 96%;
  height: 40px;
  margin-left: 2%;
  border-radius: 5px;
  color: red;
  background-color: #fff;
  border: none;
  margin-top: 30px;
}

.v {
  color: #000;
  font-weight: 400;
  margin-right: 10px;
}

.popup{
  width: 86%;
  height: 100px;
  margin-left: 7%;
}
.popup>p{
  height: 20px;
  text-align: center;
  margin-top: 20px;
}
.popup>span>button{
  width: 50%;
  height: 40px;
  margin-top: 20px;
}
.qu{
  color: black;
  font-weight: 400;
}
.popup-tou{
  width: 86%;
  height: 100px;
  margin-left: 7%;
  border-radius: 5px;
  text-align: center;
  margin-top: 180px;
}
.popup-tou>p{
  height: 50px;
  line-height: 50px;
}
/* .popup-tou2{
  width: 86%;
  height: 50px;
  margin-top: 100px;
} */
</style>
